<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 回调函数： 把一个函数作为参数传入到另外一个函数中，那么这个函数就叫做回调函数。

        // 定时器 防抖节流，事件绑定
        // ajax发送请求，axios发送请求（基于xhr）.then(res => {}) .catch(err => {})


        // 1. ajax 
        // 2. setTimeout / setInterval 
        // 3. 事件绑定 点击事件，页面加载事件

        // 回调函数，有同步执行的，也有异步执行的，但大多数都是异步执行的。

        // 同步：一件一件依次执行
        // 异步：同时，不会阻塞后面代码的执行。回头再调用，当满足触发条件的时候，才回过头来调用执行。

        // const arr = [1, 2, 3]
        // // arr.forEach(cbFn)
        // // 同步的回调 不需要等待的 
        // arr.forEach(function(el){
        //     console.log(el)
        // })

        // console.log(1)

        // setTimeout是异步的，不会阻塞代码的运行，
        // setTimeout(() => {
        //     console.log(2)
        // }, 1000);

        // setTimeout(() => {
        //     console.log(4)
        // }, 0);

        // console.log(3)

        // 1 3 2 4

        // 1 3 4 2 

        // 先执行同步的代码，执行完之后，再去看异步的


        // 需求：等1秒输出 红色，一定是红色输出之后， 再过两秒输出 黄色， 再过3秒 输出绿色 ？

        // 异步函数 不会立即执行，那么这么嵌套的话，阅读性不好， ==> 用异步函数实现同步的功能。
        setTimeout(() => {
            console.log('红色')
            setTimeout(() => {
                console.log('黄色')
                setTimeout(() => {
                    console.log('绿色')
                    setTimeout(() => {
                        console.log('紫色')
                    }, 4000);
                }, 3000);
            }, 2000); 
        }, 1000); // 这个延迟时间是不准确的，它一定会等待同步代码执行完之后，才执行。
        

        // setTimeout是异步的，怎么理解？因为当js代码运行到setTimeout这个位置的时候，
        // setTimeout会开启一个定时器，等待回调函数的执行。
        const arr = new Array(10000).fill(0)
        arr.forEach(el => console.log(el))

        // 但是异步的它，不会阻塞它后面代码的运行。在等待的这个过程中，我还可以执行后面的代码。

        // console.log(11231)

        // 异步回调函数，可能会造成回调地狱的问题！！！

        // 当我们需要等待一个回调完成再执行下一个回调的时候，如果依次套娃，回调地狱

        // promise承诺，promise设计之初，就是为了解决回调地狱的问题滴~~

        // btn.addEvenListener('click', (el) => {
        //     cb()
        // })



    </script>
</body>
</html>